<template>
    <view class="pg-center">
        <view class="hvh-100 cont ju-bet pb-safe">
            <view class="w-700 h-900 rd-14 fl-co-cen ju-bet">
                <view class="w-390 fl-ro-cen ju-bet mt-150">
                    <view class="w-150 h-150 bg-white rd-999 overflow-hidden fl-co-cen ju-cen">
                        <image src="../../static/image/logo.png" class="w-100 h-100" mode="widthFix"></image>
                    </view>
                    <view class="h-100 fl-co-cen ju-bet">
                        <wd-text text="纸惠广销" size="28px" bold color="#36B8C2" lineHeight="28px"></wd-text>
                        <wd-text text="多功能产品展销机" size="14px" color="#36B8C2" lineHeight="14px"></wd-text>
                    </view>
                </view>
                <wd-text text="WELCOM" size="68px" bold color="#fff" lineHeight="28px"></wd-text>
                <wd-button
                    type="success"
                    size="large"
                    custom-class="w-700 mb-100"
                    @click="user_login"
                    :open-type="isAgree ? 'getPhoneNumber' : ''"
                    @getphonenumber="getPhoneNumber"
                >
                    手机号一键登录/注册
                </wd-button>
            </view>
            <view class="fl-ro-cen">
                <wd-checkbox v-model="isAgree" size="large"></wd-checkbox>
                <wd-text text="我已阅读并同意" size="12px"></wd-text>
                <wd-text text="《纸惠广销用户协议》" size="12px" type="primary"></wd-text>
                <wd-text text="及" size="12px"></wd-text>
                <wd-text text="《纸惠广销隐私政策》" size="12px" type="primary"></wd-text>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { wxLogin } from '@/api/login.js';

    const isAgree = ref(false); //同意隐私协议
    const wxCode = ref('');
    const phoneCode = ref('');

    //点击登录 启动登录步骤
    const user_login = async () => {
        //是否同意用户协议
        if (!isAgree.value) {
            uni.showToast({
                icon: 'none',
                title: '请勾选同意用户协议和隐私协议'
            });
            return;
        }
        // 步骤1 获取wx_code
        try {
            let loginRes = await uni.login({
                provider: 'weixin'
            });
            wxCode.value = loginRes.code;
            console.log('wx_code', wxCode.value);
        } catch (error) {
            console.error('错误:', error);
        }
    };

    // 步骤2 获取phone_code
    const getPhoneNumber = async (e) => {
        phoneCode.value = e.code;
        if (phoneCode.value) {
            console.log('phone_code', phoneCode.value);
        } else {
            uni.showToast({
                icon: 'none',
                title: '操作取消'
            });
            return;
        }
        //步骤3 调用登录函数执行登录
        handleLogin();
    };

    // 登录函数
    const handleLogin = async () => {
        console.log('登录');
        try {
            let res = await wxLogin({
                code: wxCode.value,
                phoneCode: phoneCode.value,
                userType: 4
            });
            //存储token和user信息
            uni.setStorageSync('token', res.token);
            uni.setStorageSync('user', { ...uni.getStorageSync('user'), ...res.user });
            uni.reLaunch({
                url: '/pages/custom/index/index'
            });
        } catch (error) {
            console.log(error);
            uni.showToast({
                title: error.msg,
                icon: 'none'
            });
        }
    };

    onLoad(() => {});
</script>

<style lang="scss" scoped></style>
